import React from 'react'
import { connect } from 'react-redux'
import actions from '@/store/actions/todo'

@connect(state => state.todo, actions)
class TodoList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            todos: []
        }
    }

    static getDerivedStateFromProps(props, state) {
        return {
            todos: props.todos
        }
        // 根据props和state计算出预期的状态改变，返回结果会被送给setState
    }

    todoChange = event => {
        this.props.toggleComplete(event.target.value)
    }

    delClick = event => {
        console.log(event.target)
        this.props.delTodo(event.target.dataset.id)
    }

    // 按diplay条件过滤数据
    filterDisplay() {
        return this.props.todos.filter(item => {
            switch (this.props.display) {
                case 'completed':
                    return item.isComplete
                case 'uncompleted':
                    return !item.isComplete
                case 'all':
                default:
                    return true
            }
        })
    }

    getTodos() {
        return this.filterDisplay().map((todo, index) => (
            <li key={index}>
            <input
                    type="checkbox"
                    value={todo.id}
                    checked={todo.isComplete}
                onChange={this.todoChange} />
                {todo.isComplete ? <del>{todo.title}</del> : <span>{todo.title}</span>}
                <button type="danger" data-id={todo.id} onClick={this.delClick}>
                    删除
              </button>
          </li>
        ))
    }

    render() {
        return (
            <div>
                <ul>{this.getTodos()}</ul>
          </div>
        )
    }
}
export default TodoList
